<template>
<div class="page-main">
  <el-row :gutter="30">
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>  </template>
              <charts-line :lineData="state.lineData" :line_x="state.line_x"></charts-line>
      </el-card>
    </el-col>
  </el-row>



  <el-row :gutter="30">
      <span class="title-span"
      >2023-01至2023-02日间手术占则期手术比</span
      >
    <el-divider />
    <el-col :span="24">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label=""   />
        <el-table-column prop="value_1" label="日间手术完成量"  />
        <el-table-column prop="value_2" label="则期手术完成量" />
        <el-table-column prop="value_3" label="日间手术则期手术比" />

      </el-table>
    </el-col>
  </el-row>
</div>
</template>

<script setup name="timeAll">
import chartsLine from '/@/components/charts/line.vue';
const tableData = ref([
    {
      date: '2023-01-31',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-01',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-02',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-03',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-04',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-05',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-06',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-07',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-08',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-09',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-10',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-11',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-12',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-13',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},
    {
      date: '2023-02-14',
      value_1: 120,
      value_2: 132,
      value_3: '5%'},]
);
const state = reactive({
  lineData: [
    {
      name: '日间手术',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
    },
    {
      name: '则期手术',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
    },
    {
      name: '日间手术占则期手术比',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
    },
  ],

  line_x: ['2023-01-31', '2023-02-01', '2023-02-02', '2023-02-03', '2023-02-04', '2023-02-05', '2023-02-06', '2023-02-07', '2023-02-08', '2023-02-12'],
})
</script>


<style lang="scss" scoped>
.title-span{
  width: 100%;
  text-align: center;
  margin-top: 15px;
  font-size: 30px;
  font-size: large;
}
</style>
